<template>
	<view class="dialog-container" v-if="display">
		<!-- 12312312312312312 -->
		<!-- 遮罩 -->
		<view class="dialog-background" @click="clickToClose"></view>
		<!-- 主窗体 -->
		<view class="dialog-main">
			<view class="dialog-title">{{title}}</view>
			<slot></slot>
			<text class="dialog-btn" @click="clickConfirm()">{{confirmText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dialog-shell",
		props:{
			title:{
				type:String,
				required:true,
				validator:(val) =>{
					return val.length > 0;
				}
			},
			confirmText:{
				type: String,
				default: "确定",
				required: false,
				validator: (val) =>{
					return val.length > 0;
				}
			}
		},
		data() {
			return {
				display:false,
			};
		},
		methods:{
			clickToClose(){
				this.display = false;
			},
			show(){
				this.display = true;
			},
			clickConfirm(){
				this.$emit("confirm")
				this.display = false;
			},
		}
		
		
	}
</script>

<style>
@import url("dialog-shell.css");

</style>